<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
    <script src="js/flexible.js"></script>
    <script src="js/axios.min.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        ul li{
          list-style: none;
        }
     .word{
        width: 100%;
        height:100%;
        display: flex;
        flex-direction: column;
     }
      .head{
        width: 100%;
        height: 2.666667rem;
        display: flex;
        justify-content: center;
        align-items: center;
        color: red;
        font-size: .533333rem;
      }
      .cont{
        width: 100%;
        height: 11.893333rem;
        display: flex;
        flex-direction: column;

        overflow: hidden;
            text-overflow:  ellipsis;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
      }
      .head_nav{
         width: 10rem;
         height: 1.106667rem;
         display: flex;
         justify-content: center;
        align-items: center;
      }
      .head_nav li:nth-of-type(1){
        width: 1.066667rem;
        height: 1.066667rem;
        justify-content: center;
      }
      .head_nav li:nth-of-type(2){
        width: 6.8rem;
        height: .533333rem;
      }
      .head_nav li:nth-of-type(3){
        width: 1.066667rem;
        height: 1.066667rem;
        justify-content: center;
      }
      .head_nav img{
         width: .453333rem;
         height: .533333rem;
      }
      .con_one{
            width: 10rem;
            height: 1.226667rem;
            display: flex;
      }
      .con_one ul{
            width: 10rem;
            height: 1.226667rem;
            display: flex;
            justify-content: space-around;
            align-items: center;
            font-size: .426667rem;
      }
     .con_two{
            width: 10rem;
            height: 5.333333rem;
            display: flex;
           flex-wrap: wrap;

          
     }
     .con_two ul{
           width: 3.155467rem;
           height: 5.9728rem;
           justify-content: center;
           align-items: center;
           margin-left: .133333rem;

     }
   .one{
     width: 2.835467rem;
     height: 3.04rem;
   }
   .one img{
     width: 2.835467rem;
     height: 3.04rem;
   }
   .two{
    width: 2.835467rem;
     height: .88rem;
     display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    word-break: break-word;
   }
   .swit{
    width: 2.835467rem;
     height: .746667rem;
     background-color: crimson;
    color: #fff;
    text-align: center;
    line-height: .746667rem ;
   }
   .bobo{
    width: 2.835467rem;
    height: .88rem;
    color: red;
   }
    </style>
</head>
<body>
    <div id="app" class="word">
         <myheader></myheader>
         <mycon :list="list"></mycon>
    </div>
    <template id="myheader">
            <div class="head">
              <p>头部星期六在写</p>
              <!-- <ul class="head_nav">
                <li>头部</li>
                <li>今天</li>
                <li>在写</li>
              </ul> -->
            </div>
    </template>
    <template id="mycon">
         <div class="cont">
            <div class="con_one">
                    <ul>
                      <li>当季爆款</li>
                      <li>美白秘籍</li>
                      <li>屈家热卖</li>
                    </ul>                      
            </div>

            <div class="con_two">
                  <ul v-for="item in list">
                    <li class="one"><img :src="item.over_image_url" /></li>
                    <li class="two">{{item.item_name}}</li>
                    <li class="bobo"> ￥{{item.min_price/100}} </li>
                    <li class="swit">立即购买</li>
                  </ul>

            </div>
            

         </div>


    </template>
    
  <script>
    //1.新建事件总线对象
     const bus=new Vue()
  
     // 导航
    var myheader={
     
       template:"#myheader",
      
    }
   //内容
    var mycon={
      props: ["list"],
      template:`#mycon`,

    }
 

    var app=new Vue({
           el:"#app",
           data:{
               list:[]
           },
           mounted() {
            axios.get("./list.json").then(res => {
               this.list = res.data;
             console.log(this.list)
            })
         },
           components: {
            myheader,mycon
           }

    })


  </script>



</body>
</html>